﻿<html>
<head>
<title>ACM刷题统计-设置</title>
<style type="text/css">
body{
	background-color:#FFF;
	font-size:14px;
}
#inputtext{
	display:none;
}
#inputtext a{
	margin:0 10px;
}
#acmers{
	height:600px;
	width:980px;
	overflow-x:hidden;
}
#acmers input{
	border:none;
	border-bottom:1px solid #000;
	size:20;
}
#acmers input:focus{
	background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#EBEBEB), to(#878787), color-stop(0.5,#CFCFCF));
	outline-color: #FFF;
}
.acmer_name,.acmer_pku,.acmer_hdu,.acmer_bistu{
	margin:0 10px;
	width: 150px;
	height:1.5em;
	line-height:1.5em;
	display:inline-block;
}

.update_acmer{
	display:none;
}
.warning{
	color:red;
}
</style>
<script type="text/javascript" src="./js/dom.js"></script>
<script type="text/javascript" src="./js/acmer.js"></script>
<script type="text/javascript" src="./js/storage.js"></script>
<script type="text/javascript">
var acmer_list;
function setWarning(){
	if (!hasClass(document.getElementsByClassName('btn')[1],'warning')){
		addClass(document.getElementsByClassName('btn')[1],'warning');
	}
}
function add_line(acmer){
	var newli = document.createElement("ol");  
	newli.innerHTML = '<input type="hidden" class="acmer_uid" onchange=""/><input type="text" class="acmer_name" onchange="setWarning()"/><input class="acmer_hdu"  onchange="setWarning()"/><input class="acmer_pku" onchange="setWarning()"/><input class="acmer_bistu" onchange="setWarning()" /><a class="delete" href="javascript:void(0);">删除</a><a class="update_acmer" href="javascript:void(0);">更新</a>';
	if (acmer && acmer.uid){
		newli.getElementsByClassName('acmer_uid')[0].setAttribute('value',acmer.uid);
		newli.getElementsByClassName('update_acmer')[0].setAttribute('onclick','update_acmer('+ acmer.uid +',this)');
	}	
	if (acmer && acmer.name)
		newli.getElementsByClassName('acmer_name')[0].setAttribute('value',acmer.name);
	if (acmer && acmer.oj.hdu.id)
		newli.getElementsByClassName('acmer_hdu')[0].setAttribute('value',acmer.oj.hdu.id);
	if (acmer && acmer.oj.pku.id)
		newli.getElementsByClassName('acmer_pku')[0].setAttribute('value',acmer.oj.pku.id);
	if (acmer && acmer.oj.bistu.id)
		newli.getElementsByClassName('acmer_bistu')[0].setAttribute('value',acmer.oj.bistu.id);
		
	newli.getElementsByClassName('delete')[0].setAttribute('onclick','del_line(this.parentNode)');
	newli.getElementsByClassName('delete')[0].setAttribute('style','margin:0 5px 0 5px');
	if (acmer && (acmer.oj.hdu.status != "success" || acmer.oj.bistu.status != "success" || acmer.oj.pku.status != "success"))	
		newli.getElementsByClassName('update_acmer')[0].style.display = "inline-block";
	//newdiv.setAttribute('style','-webkit-transition: all 1s ease-in-out;' );
	document.getElementById('acmers').appendChild(newli);  
	setWarning();
}
function update_acmer(uid,dom){
	if (uid){
		chrome.extension.sendRequest({"hope": "update_acmer","uid":uid}, function(response) {
			dom.style.display ="none";
		});
	}
}
function del_line(obj){
	document.getElementById('acmers').removeChild(obj);
	//console.log(obj);
	setWarning();
}
function update_acmer_list(){
	var dom_list = document.getElementById('acmers').getElementsByTagName('ol');
	var i;
	var newacmer;
	storage.acmers.list.length = 0;
	for (i = 1;i < dom_list.length;i++){
		storage.acmers.add(dom_list[i].getElementsByClassName('acmer_name')[0].value,dom_list[i].getElementsByClassName('acmer_hdu')[0].value,dom_list[i].getElementsByClassName('acmer_pku')[0].value,dom_list[i].getElementsByClassName('acmer_bistu')[0].value);
	}
	chrome.extension.sendRequest({"hope": "save_acmer_list","acmer_list":storage.acmers.list,"update_oj":1}, function(response) {
		location.reload();
	});

}
function onload(){
	chrome.extension.sendRequest({"hope": "get_acmer_list"}, function(response) {
		var i;
		for (i =0;i < response.length;i++){
			add_line(response[i]);
		}
		if (hasClass(document.getElementsByClassName('btn')[1],'warning')){
			removeClass(document.getElementsByClassName('btn')[1],'warning');
		}

	});

}
function output(){
	var dom_list = document.getElementById('acmers').getElementsByTagName('ol');
	var i;
	var newwin=window.open('','',''); 
	storage.acmers.list.length = 0;
	for (i = 1;i < dom_list.length;i++){
		storage.acmers.add(dom_list[i].getElementsByClassName('acmer_name')[0].value,dom_list[i].getElementsByClassName('acmer_hdu')[0].value,dom_list[i].getElementsByClassName('acmer_pku')[0].value,dom_list[i].getElementsByClassName('acmer_bistu')[0].value);
	}
	newwin.opener = null 
	newwin.document.write(JSON.stringify(storage.acmers));
	newwin.document.close();
}
function input_json(){
	try{
		var json = document.getElementById("inputtext").getElementsByTagName("textarea")[0].value;
		var list = JSON.parse(json).list;
		var acm = new acmer();
		for (i =0;i < list.length;i++){
			acm.name = list[i].name;
			acm.oj.hdu.id = list[i].oj.hdu.id;
			acm.oj.pku.id = list[i].oj.pku.id;
			acm.oj.bistu.id = list[i].oj.bistu.id;
			add_line(acm);
		}
		if (!hasClass(document.getElementsByClassName('btn')[1],'warning')){
			addClass(document.getElementsByClassName('btn')[1],'warning');
		}
		document.getElementById("inputtext").style.display = "none";
	}catch(e){
		alert("数据格式错误 导入失败");
		console.log(e);
	}
}
function input_text(){
	var list = document.getElementById("inputtext").getElementsByTagName("textarea")[0].value.split('\n');
	var acm = new acmer();
	for (var i = 0;i < list.length;i++){
		if (list[i].split('\t').length >= 4){
			acm.name = list[i].split('\t')[0];
			if (typeof acm.name != "string" || !acm.name)
				continue;
			acm.oj.hdu.id = list[i].split('\t')[1];
			acm.oj.pku.id = list[i].split('\t')[2];
			acm.oj.bistu.id = list[i].split('\t')[3];
			add_line(acm);
			list.splice(i,1);
			i--;
		}
	}
	document.getElementById("inputtext").getElementsByTagName("textarea")[0].value = list.join('\n');
}
</script>
</head>
<body onload = "onload()">
<div id="inputtext"><textarea style="width:980px;height:50px;"></textarea><br /><a href="javascript:void(0);">提交</a><a href="javascript:void(0);" onclick="this.parentNode.style.display='none';" >关闭</a></div>
<a href="javascript:void(0);" onclick = "add_line()" class="btn">添加</a>
<a href="javascript:void(0);" onclick = "update_acmer_list()" class="btn">提交</a>
<a href="javascript:void(0);" onclick = "output()" class="btn">导出备份</a>
<a href="javascript:document.getElementById('inputtext').style.display='block';document.getElementById('inputtext').getElementsByTagName('a')[0].setAttribute('onclick','input_json()');document.getElementById('inputtext').getElementsByTagName('textarea')[0].value='只支持导出备份得到的数据';" class="btn" title="不会覆盖 可能会重复">增量导入备份</a>
<a href="javascript:document.getElementById('inputtext').style.display='block';document.getElementById('inputtext').getElementsByTagName('a')[0].setAttribute('onclick','input_text()');document.getElementById('inputtext').getElementsByTagName('textarea')[0].value='四列分别是姓名\tHUD_ID\tPKU_ID\tBISTU_ID\t没有ID请保持空格 Tab分割列(Elcel中直接复制即可) 每人一行数据';" class="btn" title="不会覆盖 可能会重复">导入格式文本</a>
<a href="./rank.html">榜单</a>
<ul id="acmers">
<ol><span type="text" class="acmer_name">姓名</span><span class="acmer_hdu" >HDU_ID</span><span class="acmer_pku" >PKU_ID</span><span class="acmer_bistu" >BISTU_ID</span></ol>
</ul>
</body>
</html>